<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>Egret</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="full-screen" content="true"/>
  <meta name="screen-orientation" content="portrait"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  <style>
    html, body {
      -ms-touch-action: none;
      background: #888888;
      padding: 0;
      border: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>

<body>
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
     data-entry-class="Main"
     data-orientation="landscape"
     data-scale-mode="showAll"
     data-frame-rate="30"
     data-content-width="640"
     data-content-height="640"
     data-multi-fingered="2"
     data-show-fps="true" data-show-log="true"
     data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div>
<script>
  var loadScript = function (list, callback) {
    var loaded = 0;
    var loadNext = function () {
      loadSingleScript(list[loaded], function () {
        loaded++;
        if (loaded >= list.length) {
          callback();
        }
        else {
          loadNext();
        }
      })
    };
    loadNext();
  };

  var loadSingleScript = function (src, callback) {
    var s = document.createElement('script');
    s.async = false;
    s.src = src;
    s.addEventListener('load', function () {
      s.parentNode.removeChild(s);
      s.removeEventListener('load', arguments.callee, false);
      callback();
    }, false);
    document.body.appendChild(s);
  };

  var xhr = new XMLHttpRequest();
  xhr.open('GET', './manifest.json?v=' + Math.random(), true);
  xhr.addEventListener("load", function () {
    var manifest = JSON.parse(xhr.response);
    var list = manifest.initial.concat(manifest.game);
    loadScript(list, function () {
      /**
       * {
             * "renderMode":, //Engine rendering mode, "canvas" or "webgl"
             * "audioType": 0 //Use the audio type, 0: default, 2: web audio, 3: audio
             * "antialias": //Whether the anti-aliasing is enabled in WebGL mode, true: on, false: off, defaults to false
             * "calculateCanvasScaleFactor": //a function return canvas scale factor
             * }
       **/
      egret.runEgret({
        renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor: function (context) {
          var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
          return (window.devicePixelRatio || 1) / backingStore;
        }
      });
    });
  });
  xhr.send(null);
</script>
</body>

</html>
